<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" @click="toIndex">崩坏三</el-menu-item>
      <el-submenu index="2">
        <template slot="title">璃月港</template>
        <el-menu-item index="2-1">轻策庄</el-menu-item>
        <el-menu-item index="2-2">归璃原</el-menu-item>
        <el-menu-item index="2-3">天衡山</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" >蒙德城</el-menu-item>
      <el-menu-item index="4" @click="toDaoqi">稻妻城</el-menu-item>
      <el-menu-item index="5" @click="toRightNav">提瓦特</el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      navLists: [],
      // 读取上一次跳转的最后的高亮路由，没有就高亮首页
      activeIndex: localStorage.getItem('key') || '1'
    }
  },
  methods: {
    change () {
      // 切换的时候 改变index
    },
    toIndex () {
      this.$router.push({
        path: '/index'
      })
    },
    toDaoqi () {
      this.$router.push({
        path: '/daoqi'
      })
    },
    toRightNav () {
      this.$router.push({
        path: '/rightnav'
      })
    },
    handleSelect (key, keyPath) {
      // 存当前的activeIndex，因为每次刷新页面，上一次的activeIndex都会消失
      localStorage.setItem('key', key)
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav {
  width: 100%;
  height: 50px;
  ul {
    display: flex;
    align-content: center;
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      color: #666;
      font-size: 20px;
      margin: 0 10px;
      transition: all 0.5s ease-out;
    }
    li:hover {
      cursor: pointer;
      background-color: orangered;
      color: black;
      border-radius: 5px;
      transform: scale(1.1);
    }
  }
}
</style>
